<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>支付宝沙箱支付</title>
</head>
<body>
<div id="all">
    <h1>支付宝沙箱支付</h1>
    <div class="orderFormDiv">
        <h2>订单信息：</h2>
        <form action="/elm/pcPayment" method="get">
            <table width="100%">
                <tr>
                    <td>订单号：</td>
                    <td><input type="text" name="outTradeNo" id="orderNo"></td>
                </tr>
                <tr>
                    <td>订单金额：</td>
                    <td><input type="text" name="totalAmount" id="payAmount"></td>
                </tr>
                <tr>
                    <td>订单标题：</td>
                    <td><input type="text" name="subject" id="orderTitle"></td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <input type="submit" value="支付">
                        <input type="reset" value="重置"></td>
                </tr>
            </table>
        </form>
    </div>
    <h3>
        <!--        <button onclick="pay()">支付</button>-->
    </h3>

</div>

<style>
    #all {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #all .orderFormDiv {
        width: 60vw;
        border: 2px solid blue;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 15px;
        background: linear-gradient(145deg , white 30%,rgb(240, 179, 179) 60%,rgb(212, 154, 36));
    }

    #all .orderFormDiv form {
        width: 100%;
        /* border: 2px solid #b71313; */
        padding: 5px;
        border-radius: 6px;
    }

    #all .orderFormDiv table {
        width: 90%; /* 设置表格的宽度为100% */
        margin: 0 auto;
        border-collapse: collapse; /* 合并表格边框 */
        text-align: center;
        /* border: 3px solid orange; */
    }
    td {
        /* border: 1px solid #8d4242; 设置单元格边框 */
        padding: 8px; /* 设置单元格内边距 */
    }
    tr td:nth-child(2) input {
        width: 90%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        outline: none;
        border: 1px solid rgb(227, 142, 52);
        border-radius: 4px;
    }

    tr:last-child td input {
        width: 30%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        outline: none;
        border: 1px solid rgb(74, 93, 190);
        border-radius: 4px;
        letter-spacing: 5px;
        font-size: 18px;
        padding: 0;
        color: #b71313;
        margin-right: 5%;
    }

    tr:last-child td input:hover {
        background-color: antiquewhite;
        cursor: pointer;
        color:blue;
        font-weight: bold;
    }

    tr td:nth-child(1) {
        font-size: 16px;
        text-align: right;
        font-weight: bold;
        color: rgb(63, 58, 141);
    }

</style>


<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    console.log("----window.location.pathname:"+window.location.pathname);
    function pay() {
        $.ajax({
            url: "/elm/createPayOrder",  // 后端创建支付订单的接口
            type: "POST",
            dataType: "json",
            success: function (response) {
                console.log("-----createPayOrder---》response:%o",response)
                if (response.code == 20000) {
                    // 获取返回的支付页面内容
                    var payHtml = response.data;
                    console.log(payHtml)
                    // 创建一个隐藏的表单，提交支付页面内容
                    /*var form = $('<form></form>');
                    form.attr('action', "/elm/alipay");
                    form.attr('method', 'POST');
                    form.append(payHtml);
                    form.appendTo("body");
                    form.submit();*/
                } else {
                    console.log("创建支付订单失败");
                }
            },
            error: function (xhr, status, error) {
                console.log(error);
            }
        });
    }
</script>
</body>
</html>
